<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="日志编辑"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="my-2">{{ createDate }} {{ user.realName }}</div>
    <el-input type="textarea" :rows="10" v-model="content"></el-input>

    <div class="mt-5 text-center">
      <el-button :loading="saveLoading" class="btn-long" type="primary" @click="save">
        保存
      </el-button>

      <el-button class="mr-2 btn-long" :loading="saveLoading" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { dateFormat } from '@/common/utils/common'
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {
    visible: Boolean,
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      content: '',
      saveLoading: false,
      tableName: 'work_log',
    }
  },

  watch: {
    formData: {
      handler: function () {
        this.content = this.formData.content || ''
      },
      deep: true,
    },
  },

  computed: {
    ...mapGetters(['clientId', 'user']),
    createDate() {
      return dateFormat(new Date(), 'yyyy年MM月dd日')
    },
    workId() {
      return this.formData.work_log_id || ''
    },
  },

  created() {},
  methods: {
    save() {
      if (!this.content) {
        return this.$message.warning('请输入日志内容')
      }
      this.saveLoading = true
      if (this.workId) {
        this.$api
          .updateData(this.$serviceName, this.tableName, this.workId, {
            content: this.content,
            user_id: this.user.userId,
            real_name: this.user.realName,
            service_id: this.clientId,
          })
          .then(() => {
            this.$emit('success', true)
            this.$message.success('保存成功')
            this.beforeClose()
          })
          .catch(() => {
            this.$message.error('修改失败')
          })
          .finally(() => {
            this.saveLoading = false
          })
      } else {
        this.$api
          .addData(this.$serviceName, this.tableName, {
            content: this.content,
            user_id: this.user.userId,
            real_name: this.user.realName,
            service_id: this.clientId,
          })
          .then(() => {
            this.$emit('success', true)
            this.$message.success('添加成功')
            this.beforeClose()
          })
          .catch(() => {
            this.$message.error('添加失败')
          })
          .finally(() => {
            this.saveLoading = false
          })
      }
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
// .quill-content {
//   white-space: pre-wrap;
// }
</style>
